<template>
	<view class="root pt-30">
		<view
			v-for="(commodity, index) in goods.list"
			:key="index"
			:style="{ margin: `18rpx 24rpx` }"
			class="relative br-12 oh"
		>
			<image
				class="bgc-eee absolute width-100percent height-100percent"
				:src="commodity.cardstyle.cover_image"
			/>
			<view
				:style="{
					zIndex: 1,
					padding: `30rpx`,
				}"
			>
				<text class="color-fff fs-28 fw-700 f1 ellipsis">
					{{ commodity.name }}
				</text>

				<text class="color-fff fs-24 mt-18">
					{{ commodity.des }}
				</text>
				<view class="jc-sb fd-row ai-center mt-22">
					<text class="color-fff fs-40 fw-800 mt-4">
						￥{{ Number(commodity.face).toFixed(2) }}
					</text>

					<button
						hover-class="tap-hover"
						class="fd-row border-none bgc-fff fs-26 ml-12 mr-0 br-28 pl-32 pr-32 lh-2"
						@click="buy(index)"
						:plain="true"
					>
						<text class="color-666">立即购买</text>
						<text class="ml-12 color-e15a52">
							¥{{ Number(commodity.money).toFixed(2) }}
						</text>
					</button>
				</view>
			</view>
		</view>
		<uni-load-more class="mt-18" :status="loadStatus" />
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Pager } from "@/static/type";
	import { sleep } from "@/static/libs/utils";

	let requestFlag: boolean = false;
	@Component
	export default class StoreCard extends Vue {
		// component property
		goods: Pager<AnyObject> = { page: 1, list: [], size: 30 };
		loadStatus: string = "loading";

		onLoad() {
			this.getListData();
		}
		onPullDownRefresh() {
			this.goods.list = [];
			this.goods.page = 1;
			this.getListData();
		}
		onReachBottom() {
			this.getListData();
		}
		getListData() {
			const { $request, goods } = this;

			if (requestFlag || !goods.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/index/shopCardList", {
					page: goods.page,
					size: goods.size,
				})
				.then(({ data }) => {
					goods.list.push(...data);
					// goods.list.push(...data.data);
					// goods.page =
					// 	data.current_page < data.last_page
					// 		? ++data.current_page
					// 		: 0;
					// this.loadStatus = goods.page ? "more" : "noMore";
					this.loadStatus = "noMore";
				})
				.finally(() => {
					requestFlag = false;
					goods.page > 1 || uni.stopPullDownRefresh();
				});
		}
		async buy(index: number) {
			const { id } = this.goods.list[index];

			const { data: orderInfo } = await this.$request.get("/index/cardPay", {
				id,
			});

			uni.requestPayment({
				provider: "wxpay",
				...orderInfo,
				success: async () => {
					await uni.showToast({ title: "支付成功", mask: true });
					await sleep(1.5);
					uni.switchTab({ url: "/pages/tabs/Mine" });
				},
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>